<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:cfn="http://web.conquest.meb.org/function"
	xmlns:pretty="http://ocpsoft.com/prettyfaces" template="/WEB-INF/templates/ui.xhtml">

	<ui:define name="content">
		<h:panelGroup id="deckBuild">

			<h:form id="selectWarlordForm">
				<p:dataTable var="item" value="#{deckBuildCtrl.warlords}" style="width: 50%;"
					rendered="#{deckBuildCtrl.selectWarlordMode}" rowStyleClass="faction-image-container-md">

					<p:column headerText="Nazwa">
						<p:commandLink id="cardNameLink" action="#{deckBuildCtrl.initBuildDeck(item.card)}"
							update=":deckBuild">
							<h:outputText value="#{item.card.name}" />
						</p:commandLink>
						<p:tooltip for="cardNameLink" style="width: 600px;">
							<h:panelGrid columns="2" columnClasses="align-top,align-top">
								<h:graphicImage url="#{cfn:cardImagePathBase(item.card)}.png" />
								<h:panelGroup>
									<h3>
										<h:outputText value="#{item.card.name}" />
									</h3>
									<p>
										<h:outputText value="#{item.card.text}" />
									</p>
								</h:panelGroup>
							</h:panelGrid>
						</p:tooltip>
					</p:column>

					<p:column headerText="Frakcja" style="text-align: center;">
						<h:graphicImage url="#{cfn:factionImagePathBase(item.card.faction)}-b-md.png"
							title="#{item.card.factionDisplay}" />
					</p:column>

					<p:column headerText="Zasoby">
						<h:outputText value="#{item.card.startingResources}" />
					</p:column>

					<p:column headerText="Karty">
						<h:outputText value="#{item.card.handSize}" />
					</p:column>
				</p:dataTable>
			</h:form>

			<h:panelGroup class="row" rendered="#{deckBuildCtrl.buildDeckMode}" layout="block">

				<h:panelGroup class="col-4 col-left" layout="block">
					<!-- <h:graphicImage url="#{cfn:factionImagePathBase(deckBuildCtrl.deck.warlord.faction)}-b.png"
						title="#{item.deck.warlord.factionDisplay}" /> -->
					<h2>
						<h:outputText value="#{deckBuildCtrl.deck.name}" />
					</h2>
					<ui:include src="cardGroups.xhtml">
						<ui:param name="_cardGroup" value="#{deckBuildCtrl.cardGroup}" />
						<ui:param name="_squareLayout" value="true" />
					</ui:include>
				</h:panelGroup>

				<h:panelGroup class="col-6 col-right" layout="block">
					<h:form id="deckCardsForm">
						<!-- <p:button value="Settings" icon="ui-icon-c-wrench ui-icon-right" iconPos="right" /> -->

						<p:selectManyButton value="#{deckBuildCtrl.selectedFactions}"
							styleClass="f-alliance #{deckBuildCtrl.styleClass}"
							style="float: right; margin-bottom: 15px;">
							<f:selectItems value="#{deckBuildCtrl.factionSelectItems}" />
							<p:ajax process="@this" update="items" listener="#{deckBuildCtrl.filterDeckCards}" />
						</p:selectManyButton>

						<p:selectManyButton value="#{deckBuildCtrl.selectedCardTypes}" styleClass="width-30-px"
							style="float: right; margin-bottom: 15px;">
							<f:selectItems value="#{deckBuildCtrl.cardTypeSelectItems}" />
							<p:ajax process="@this" update="items" listener="#{deckBuildCtrl.filterDeckCards}" />
						</p:selectManyButton>

						<p:dataTable id="items" var="item" value="#{deckBuildCtrl.filteredDeckCards}"
							sortMode="multiple" rowStyleClass="faction-image-container-md">
							<p:column headerText="Quantity" sortBy="#{item.quantity}">
								<p:selectOneButton value="#{item.quantity}">
									<f:selectItems value="#{deckBuildCtrl.quantitySelectItems}" />
									<p:ajax process="@this" listener="#{deckBuildCtrl.cardUpdated(item)}" update="@form" />
								</p:selectOneButton>
							</p:column>
							<p:column headerText="Nazwa" sortBy="#{item.card.name}">
								<h:outputText id="cardNameText" value="#{item.card.name}" />
								<p:tooltip for="cardNameText" style="width: 600px;">
									<h:panelGrid columns="2" columnClasses="align-top,align-top">
										<h:graphicImage url="#{cfn:cardImagePathBase(item.card)}.png" />
										<h:panelGroup>
											<h3>
												<h:outputText value="#{item.card.name}" />
											</h3>
											<p>
												<h:outputText value="#{item.card.text}" />
											</p>
										</h:panelGroup>
									</h:panelGrid>
								</p:tooltip>
							</p:column>
							<p:column headerText="Typ" sortBy="#{item.card.typeDisplay}">
								<h:outputText value="#{item.card.typeDisplay}" />
							</p:column>
							<p:column headerText="Frakcja" sortBy="#{item.card.factionDisplay}"
								style="text-align: center;">
								<h:graphicImage url="#{cfn:factionImagePathBase(item.card.faction)}-b-md.png"
									title="#{item.card.factionDisplay}" rendered="#{item.factionImageAvailable}" />
							</p:column>
							<p:column headerText="K" sortBy="#{item.card}"
								sortFunction="#{deckBuildCtrl.sortByCardTotalCost}">
								<h:outputText value="#{item.card.cost}" />
								<h:outputText value="&nbsp;(#{item.card.costExtra})"
									rendered="#{item.card.costExtra != null}" />
							</p:column>
							<p:column headerText="ATK" sortBy="#{item.card.attack}">
								<h:outputText value="#{item.card.attack}" />
							</p:column>
							<p:column headerText="HP" sortBy="#{item.card.hitPoints}">
								<h:outputText value="#{item.card.hitPoints}" />
							</p:column>
							<p:column headerText="C" sortBy="#{item.card.command}">
								<h:outputText value="#{item.card.command}" />
							</p:column>
						</p:dataTable>
					</h:form>
				</h:panelGroup>

			</h:panelGroup>

		</h:panelGroup>
	</ui:define>

</ui:composition>